import React from 'react';
import { GraphinData } from '@antv/graphin';
import { Row, Col, Card, Tabs, Button } from 'antd';
import RzGraphinManage from '@/comps/RzGraphin';
import JsonView from '@/comps/JsonView';
import MetadataEdit from '@/comps/MetadataEdit';
import MetadataForm from '@/comps/MetadataForm';
import { FormInstance } from 'antd/lib/form';
import './index.less';

const data: GraphinData = {
  nodes: [
    {
      id: 'node-0',
      data: {
        type: 'Concept',
        name: 'Person',
      },
    },
    {
      id: 'node-0-0',
      data: {
        type: 'Property',
        name: 'text',
      },
    },
    {
      id: 'node-1',
      data: {
        type: 'Concept',
        name: 'Company',
      },
    },
    {
      id: 'node-2',
      data: {
        type: 'Concept',
        name: 'Food',
      },
    },
  ],
  edges: [
    {
      source: 'node-0',
      target: 'node-1',
      data: {
        name: '属于',
      },
    },
    {
      source: 'node-0',
      target: 'node-0-0',
      data: {
        name: '工作于',
      },
    },
    {
      source: 'node-0',
      target: 'node-2',
      data: {
        name: '实际控制人',
      },
    },
  ],
};

const onNodeClick = (_data: any) => {
  console.log(_data);
};

const type_data = [
  {
    id: 2,
    type: 'object',
    properties: [
      { id: 'title', type: 'text' },
      { id: 'path', type: 'text' },
      { id: 'caption', type: 'text' },
      { id: 'format', enum: [{ value: 'rzTimeseriesSpec' }, { value: 'rzTimeseriesTrend' }], type: 'enum' },
      { id: 'match', type: 'bool' },
    ],
  },
  {
    id: 5,
    type: 'object',
    properties: [
      { id: 'key', type: 'text' },
      { id: 'title', type: 'text' },
      { id: 'tag', type: 'text' },
      { id: 'data', type: 'ref', refId: 6 },
      { id: 'children', type: 'array', items: { type: 'ref', refId: 5 } },
    ],
  },
  {
    id: 6,
    type: 'object',
    properties: [
      { id: 'id', type: 'text' },
      { id: 'path', type: 'text' },
      { id: 'remark', type: 'text' },
      { id: 'format', enum: [{ value: 'rzTimeseriesSpec' }, { value: 'rzTimeseriesTrend' }], type: 'enum' },
      { id: 'type', type: 'text' },
      { id: 'sampleRate', type: 'number', format: 'double' },
      { id: 'convertCoef', type: 'number', format: 'double' },
      { id: 'measDate', type: 'number', format: 'int' },
      { id: 'value', type: 'number', format: 'double' },
      { id: 'trendPath', type: 'array', items: { type: 'ref', refId: 2 } },
    ],
  },
];

const _schema = [
  {
    id: 'form',
    type: 'object',
    properties: [
      { id: 'name', type: 'text', require: true },
      { id: 'age', type: 'number', require: true },
      { id: 'sex', type: 'bool', require: true },
      { id: 'hobby', type: 'enum', enum: [{ value: '苹果' }, { value: '香蕉' }], require: true },
      { id: 'list', type: 'array', items: { type: 'text' }, require: true },
    ],
    fields: [
      {
        id: 'name',
        type: 'object',
        properties: [
          { id: 'label', type: 'text' },
          { id: 'defaultValue', type: 'text' },
          { id: 'tooltip', type: 'text' },
          { id: 'placeholder', type: 'text' },
        ],
        value: {
          label: '姓名',
          defaultValue: '小王',
          tooltip: '这是用来演示tooltip功能的',
          placeholder: '这是用来演示tooltip功能的',
        },
      },
      {
        id: 'age',
        type: 'object',
        properties: [
          { id: 'label', type: 'text' },
          { id: 'defaultValue', type: 'number' },
          { id: 'tooltip', type: 'text' },
        ],
        value: {
          label: '年龄',
          defaultValue: 18,
          help: '这是帮助信息',
        },
      },
      {
        id: 'sex',
        type: 'object',
        properties: [
          { id: 'label', type: 'text' },
          { id: 'checkedChildren', type: 'text' },
          { id: 'unCheckedChildren', type: 'text' },
        ],
        value: {
          label: '性别',
          checkedChildren: '男',
          unCheckedChildren: '女',
        },
      },
      {
        id: 'hobby',
        type: 'object',
        properties: [
          { id: 'label', type: 'text' },
          { id: 'defaultValue', type: 'array', items: { type: 'text' } },
          { id: 'mode', type: 'text' },
        ],
        value: {
          label: '爱好',
          defaultValue: ['香蕉'],
          mode: 'multiple',
        },
      },
      {
        id: 'list',
        type: 'object',
        properties: [{ id: 'label', type: 'text' }],
        value: {
          label: 'String数组',
        },
      },
    ],
  },
];

const Index = () => {
  const [metaSchema, setMetaSchema] = React.useState<string>('');

  const [form, setForm] = React.useState<FormInstance>();

  const onMetadataEditChange = (_metaSchema: string) => {
    setMetaSchema(_metaSchema);
  };

  const onValuesChange = (changedValues: any, allValues: any) => {
    console.log('onValuesChange', changedValues, allValues);
  };

  const onFinish = (values: any) => {
    console.log('values:', values, JSON.stringify(values));
  };

  return (
    <>
      <Row gutter={16} style={{ height: '100%' }}>
        <Col span={6} style={{ height: '100%' }}>
          <Card title="关系数据" style={{ height: '100%' }} bodyStyle={{ height: 'calc(100% - 70px)', overflow: 'auto' }}>
            <div style={{ width: '100%', height: '100%', overflow: 'auto' }}>
              <JsonView json={JSON.stringify(data)} />
            </div>
          </Card>
        </Col>
        <Col span={18} style={{ height: '100%' }}>
          <Tabs type="card" style={{ height: '100%' }}>
            <Tabs.TabPane tab="元数据编辑器" key="3" style={{ height: '100%' }}>
              <Row style={{ height: '100%' }}>
                <Col span={10} style={{ height: '100%', overflow: 'auto' }}>
                  <MetadataEdit onChange={onMetadataEditChange} />
                </Col>
                <Col span={4} style={{ height: '100%' }}>
                  <div style={{ width: '100%', height: '100%', overflow: 'auto' }}>
                    <JsonView json={metaSchema} />
                  </div>
                </Col>
                <Col span={10} style={{ height: '100%' }}>
                  {metaSchema && (
                    <div style={{ height: '100%', overflow: 'auto', padding: '10px' }}>
                      <Button
                        type="primary"
                        onClick={() => {
                          form && form.submit();
                        }}
                      >
                        提交
                      </Button>
                      <MetadataForm
                        schema={[JSON.parse(metaSchema)]}
                        onFinish={onFinish}
                        getFormInstance={(_form) => {
                          setForm(_form);
                        }}
                        onValuesChange={onValuesChange}
                      />
                    </div>
                  )}
                </Col>
              </Row>
            </Tabs.TabPane>
            <Tabs.TabPane tab="元数据表单" key="4">
              <div style={{ width: '40%', height: '100%', overflow: 'auto' }}>
                <Button
                  type="primary"
                  onClick={() => {
                    form && form.submit();
                  }}
                >
                  提交
                </Button>
                <MetadataForm
                  schema={_schema}
                  onFinish={onFinish}
                  getFormInstance={(_form) => {
                    setForm(_form);
                  }}
                  onValuesChange={onValuesChange}
                />
              </div>
            </Tabs.TabPane>

            <Tabs.TabPane tab="实体关系图样式" key="1">
              <RzGraphinManage data={data} type="concept" onNodeClick={onNodeClick} />
            </Tabs.TabPane>
            <Tabs.TabPane tab="知识地图样式" key="2">
              <RzGraphinManage data={data} type="domain" onNodeClick={onNodeClick} />
            </Tabs.TabPane>
          </Tabs>
        </Col>
      </Row>
    </>
  );
};

export default Index;
